<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="description" content="Mobiscroll is a scroller style date/time picker optimized for touch devices such as iPhone, iPad, Android, to easily enter date and/or time. It's easily customizable and comes with very nice pre-defined themes: iOS, Android, Sense UI, Default."/>
    <meta name="keywords" content="jQuery, JavaScript, datepicker, timepicker, touchscreen, Webkit, android, iPhone, iPad, webapps, GalaxyTab, dropdown, mobile, wheel, senseui, wheel, barrel, scroller-style, clickpick"/>
    <title>Mobiscroll</title>
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />

    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    <script src="mobiscroll.js" type="text/javascript"></script>

    <link href="mobiscroll.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        body {
            font-family: arial, verdana, sans-serif;
            font-size: 12px;
        }
        .dww img {
            width: 30px;
            height: 30px;
            margin: 5px 10px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {
            // Date with external button
            $('#date1').scroller();
            // Time
            $('#date2').scroller({ preset: 'time' });
            // Datetime
            $('#date3').scroller({ preset: 'datetime' });

            var group = {};
            var wheels = [group];
            for (var i = 1; i < 4; i++) {
                var wheel = {};
                for (var j = 0; j < 100; j++) {
                    wheel[j] = '<img src="img/fruit-' + (j % 5 + 1) + '.png" />'
                }
                group['Fruit ' + i] = wheel;
            }

            $('#custom').scroller({
                wheels: wheels
            });

            $('#disable').click(function() {
                $('#date1').scroller('disable');
                return false;
            });

            $('#enable').click(function() {
                $('#date1').scroller('enable');
                return false;
            });

            $('#get').click(function() {
                alert($('#date1').scroller('getDate'));
                return false;
            });

            $('#set').click(function() {
                $('#date1').scroller('setDate', new Date(), true);
                return false;
            });

            $('#theme, #mode').change(function() {
                var t = $('#theme').val();
                var m = $('#mode').val();
                $('#date1').scroller('destroy').scroller({ theme: t, mode: m });
                $('#date2').scroller('destroy').scroller({ preset: 'time', theme: t, mode: m });
                $('#date3').scroller('destroy').scroller({ preset: 'datetime', theme: t, mode: m });
                $('#custom').scroller('option', { theme: t, mode: m });
            });
        });
    </script>
</head>

<body>
    <div data-role="page" data-theme="b" id="jqm-home">
        <div data-role="header" data-theme="a">
            <h1>Mobiscroll</h1>
        </div>

        <div data-role="content" data-theme="d">
            <form id="testform">
                <div data-role="fieldcontain">
                    <label for="theme">Theme</label>
                    <select name="theme" id="theme" data-native-menu="false">
                        <option value="default">Default</option>
                        <option value="android">Android</option>
                        <option value="sense-ui">Sense UI</option>
                        <option value="ios">iOS</option>
                    </select>
                </div>

                <div data-role="fieldcontain">
                    <label for="mode">Mode</label>
                    <select name="mode" id="mode" data-native-menu="false">
                        <option value="scroller">Scroller</option>
                        <option value="clickpick">Clickpick</option>
                    </select>
                </div>

                <div data-role="fieldcontain">
                    <label for="date1">Date</label>
                    <input type="text" name="date1" id="date1" class="mobiscroll" />
                </div>

                <div data-role="controlgroup" data-type="horizontal">
                    <button id="disable" data-theme="a">Disable</button>
                    <button id="enable" data-theme="a">Enable</button>
                </div>
                <div data-role="controlgroup" data-type="horizontal">
                    <button id="get" data-theme="a">Get</button>
                    <button id="set" data-theme="a">Set</button>
                </div>

                <div data-role="fieldcontain">
                    <label for="date2">Time</label>
                    <input type="text" name="date2" id="date2" class="mobiscroll" readonly="readonly" value="11:23 AM" />
                </div>

                <div data-role="fieldcontain">
                    <label for="date3">Datetime</label>
                    <input type="text" name="date3" id="date3" class="mobiscroll" />
                </div>

                <div data-role="fieldcontain">
                    <label for="custom">Custom (Fruits :D)</label>
                    <input type="text" name="custom" id="custom" class="mobiscroll" value="1 0 1" />
                </div>
            </form>
        </div>
    </div>
</body>
</html>
